<!-- @author zhengjie -->
<template>
	<div class="icon-body">
		<el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons"
			@input="filterIcons">
			<i slot="suffix" class="el-icon-search el-input__icon" />
		</el-input>
		<div class="icon-list">
			<div class="list-container">
				<div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index"
					@click="selectedIcon(item)">
					<div :class="['icon-item', { active: activeIcon === item }]">
						<Icon :type="item" />
						<span>{{ item }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		fileContent
	} from './iconData.js'
	export default {
		name: 'IconSelect',
		props: {
			activeIcon: {
				type: String
			}
		},
		data() {
			return {
				name: '',
				iconList: fileContent
			}
		},
		methods: {
			filterIcons() {
				this.iconList = fileContent
				if (this.name) {
					this.iconList = this.iconList.filter(item => item.includes(this.name))
				}
			},
			selectedIcon(name) {
				this.$emit('selected', name)
				document.body.click()
			},
			reset() {
				this.name = ''
				this.iconList = fileContent
			}
		}
	}
</script>

<style >
	.icon-body {
		width: 100%;
		padding: 10px;

		.icon-search {
			position: relative;
			margin-bottom: 5px;
		}

		.icon-list {
			height: 200px;
			overflow: auto;

			.list-container {
				display: flex;
				flex-wrap: wrap;

				.icon-item-wrapper {
					width: calc(100% / 3);
					height: 25px;
					line-height: 25px;
					cursor: pointer;
					display: flex;

					.icon-item {
						display: flex;
						max-width: 100%;
						height: 100%;
						padding: 0 5px;

						&:hover {
							background: #ececec;
							border-radius: 5px;
						}

						.icon {
							flex-shrink: 0;
						}

						span {
							display: inline-block;
							vertical-align: -0.15em;
							fill: currentColor;
							padding-left: 2px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.icon-item.active {
						background: #ececec;
						border-radius: 5px;
					}
				}
			}
		}
	}
</style>